<template>
  <div class="qup-full-page">
    <section v-show="!allDetailVisible">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane
          v-for="item in tabList"
          :key="item.code"
          :label="item.label"
          :name="item.code"
          size="mini"
        />
      </el-tabs>
      <section class="query-con">
        <search-form
          ref="searchForm"
          :key="'searchFormK'+searchFormK"
          :search-config="searchConfig"
          :label-width="120"
          class="query-form"
          @search="handleSearch"
          @visible-change="$refs.refTable.refreshTableHeight()"
        />
      </section>
      <section>
        <table-box
          ref="refTable"
          :key="'reftab'+refTablKey"
          :table-config="tableConfig"
          :other-filters="otherFilters"
          :other-raw="otherParams"
          show-selection
          :off-set="0"
          @btnOperate="btnOperate"
          @selection-change="selectChange"
        >
          <el-table-column slot="before" label="序号" width="50" align="center" type="index" />
        </table-box>
      </section>
    </section>
    <AllDetail v-if="allDetailVisible" :flag="pageFlag" :row="tableSelected" :page-show.sync="allDetailVisible" @close="detailClose" />
    <Maintain v-if="mainTVisible" :rows="tableSelected" :visible.sync="mainTVisible" @close="detailClose" />
    <Feedback v-if="feedbackVisible" :rows="tableSelected" :visible.sync="feedbackVisible" @close="detailClose" />
    <import-files :key="'import'+timeKey" title="导入" :visible.sync="importVisible" :config="importConf" @success="handleImportSuccess" />
    <export-files :key="'export'+timeKey" title="导出" :visible.sync="showExport" :config="exportConf" />
  </div>
</template>

<script>
import * as config from './SRBTaskConfig'
import AllDetail from './components/SRBTaskDetail'
import Maintain from './components/maintain'
import Feedback from './components/feedback'
export default {
  components: {
    AllDetail,
    Maintain,
    Feedback
  },
  data() {
    return {
      pageFlag: 'new',
      tabList: [
        {
          label: '全部',
          code: 'all'
        }, /* {
          label: '待维护订单信息',
          code: 'tobe',
        },  */{
          label: '待返利执行',
          code: 'feedback'
        }
      ],
      activeName: 'all',
      refTablKey: new Date().getTime(),
      searchFormK: new Date().getTime(),
      searchConfig: config.allQueryConfig(this),
      tableBaseCon: {
        hideSearchBar: true,
        sort: 'lastUpdateTime',
        order: 'desc',
        buttonGroupCode: 'default',
        pageSize: 20,
        apiHeader: {
          'Permission-perCode': 'showroomtask',
          'Permission-App': 'slm'
        },
        tablePage: [20, 40, 60, 100]
      },
      baseFilter: {},
      otherFilters: [], // 表格额外查询条件
      otherParams: {}, // 表格额外查询条件
      tableConfig: {},
      tableSelected: [],
      allDetailVisible: false,
      mainTVisible: false,
      feedbackVisible: false,
      timeKey: new Date().getTime(),
      showExport: false,
      importVisible: false,
      exportConf: [],
      importConf: []
    }
  },
  watch: { },
  created() {
    const _this = this
    this.$set(this, 'tableConfig', Object.assign(this.tableBaseCon, config.allConfig(_this)))
  },
  methods: {
    btnOperate(code) {
      switch (code) {
        case 'edit':
          this.editFn()
          break
        case 'import':
          this.importFn()
          break
        case 'export':
          this.exportFn()
          break
        default:
          break
      }
    },
    detailClose(flag) {
      this.allDetailVisible = false
      switch (this.activeName) {
        case 'tobe':
          this.mainTVisible = false
          break
        case 'feedback':
          this.feedbackVisible = false
          break
        case 'all':
          this.allDetailVisible = false
          break
        default:
          break
      }
      this.$refs.refTable.clearSelection()
      this.tableSelected = []
      if (flag) {
        this.$nextTick(() => {
          this.$refs.refTable.initTableData('opCondition')
        })
      }
    },
    editFn() {
      this.pageFlag = 'edit'
      if (this.activeName === 'feedback') {
        if (!this.singleJudge(this.tableSelected, '操作', false)) {
          return
        }
        this.feedbackVisible = true
        return
      }
      if (!this.singleJudge(this.tableSelected, '操作', true)) {
        return
      }
      if (this.activeName === 'tobe') {
        this.mainTVisible = true
        return
      }
      if (this.activeName === 'feedback') {
        this.feedbackVisible = true
        return
      }
      this.allDetailVisible = true
    },
    importFn() {
      let conf = {}
      switch (this.activeName) {
        // 待维护订单
        case 'tobe':
          conf = {
            title: '待维护订单列表模板',
            url: '/slm-admin/api/v1/modelRoomInfo/importOrderExcel'
          }
          break
        case 'feedback':
          conf = {
            title: '待返利列表模板',
            url: '/slm-admin/api/v1/modelRoomInfo/importRebateExcel'
          }
          break
        case 'all':
          conf = { }
          break
        default:
          break
      }
      this.$set(this, 'importConf', [{
        code: 'import',
        name: conf.title,
        async: false,
        apiUrl: conf.url
      }])
      this.timeKey = new Date().getTime()
      this.$nextTick(() => {
        this.importVisible = true
      })
    },
    handleImportSuccess() {
      this.$nextTick(() => {
        this.$refs.refTable.initTableData('opCondition')
      })
    },
    exportFn() {
      let conf = {}
      switch (this.activeName) {
        // 待维护订单
        case 'tobe':
          conf = [{
            title: '样板间信息列表',
            code: 'all',
            url: '/slm-admin/api/v1/modelRoomInfo/export'
          }, {
            title: '待维护订单列表',
            code: 'tobe',
            url: '/slm-admin/api/v1/modelRoomInfo/exportOrder'
          }]
          break
        case 'feedback':
          conf = [{
            title: '样板间信息列表',
            code: 'all',
            url: '/slm-admin/api/v1/modelRoomInfo/export'
          }, {
            title: '待返利列表',
            code: 'feedback',
            url: '/slm-admin/api/v1/modelRoomInfo/exportRebate'
          }]
          break
        case 'all':
          conf = [{
            title: '样板间信息列表',
            code: 'all',
            url: '/slm-admin/api/v1/modelRoomInfo/export'
          }, {
            title: '导出订单数据',
            code: 'order',
            url: '/slm-admin/api/v1/modelRoomInfo/exportOrder'
          }]
          break
        default:
          break
      }
      if (Array.isArray(conf)) {
        const main = conf.map((item, i) => {
          if (i === 0) {
            return {
              code: item.code,
              name: item.title,
              dataApi: item.url + '?type=0',
              selectedRows: this.tableSelected,
              queryField: 'id',
              filtersRaw: this.otherFilters
            }
          } else {
            return [{
              code: item.code,
              name: item.title,
              dataApi: item.url + '?type=0',
              selectedRows: this.tableSelected,
              queryField: 'id',
              filtersRaw: this.otherFilters
            }, {
              code: 'exportTemplate',
              name: item.title + '模板',
              async: false,
              templateMethod: 'post',
              templateApi: item.url + '?type=1'
            }]
          }
        })
        this.$set(this, 'exportConf', main.flat())
      } else {
        this.$set(this, 'exportConf', [{
          code: conf.code,
          name: conf.title,
          dataApi: conf.url + '?type=0',
          selectedRows: this.tableSelected,
          queryField: 'id',
          filtersRaw: this.otherFilters
        }, {
          code: 'exportTemplate',
          name: conf.title + '模板',
          async: false,
          templateMethod: 'post',
          templateApi: conf.url + '?type=1'
        }])
      }

      this.timeKey = new Date().getTime()
      this.$nextTick(() => {
        this.showExport = true
      })
    },
    selectChange(v) {
      this.tableSelected = v
    },
    handleSearch(params) {
      this.otherFilters = params.filtersRaw
      this.otherParams = params.paramsRaw
      this.$nextTick(() => {
        this.$refs.refTable.initTableData('opCondition')
      })
    },
    handleClick() {
      this.tableSelected = []
      this.otherFilters = []
      this.baseFilter = {}
      this.otherParams = {}
      this.searchFormK = new Date().getTime()
      const _this = this
      switch (this.activeName) {
        case 'all':
          this.$set(this, 'tableConfig', Object.assign(this.tableBaseCon, config.allConfig(_this)))
          this.$set(this, 'searchConfig', config.allQueryConfig(this))
          break
        case 'tobe':
          this.$set(this, 'tableConfig', Object.assign(this.tableBaseCon, config.tobeConfig(_this)))
          this.$set(this, 'searchConfig', config.tobeQueryConfig(this))
          break
        case 'feedback':
          this.$set(this, 'tableConfig', Object.assign(this.tableBaseCon, config.feedbackConfig(_this)))
          this.$set(this, 'searchConfig', config.feedbackQueryConfig(this))
          break
        default:
          break
      }
      this.$nextTick(() => {
        this.refTablKey = new Date().getTime()
        this.$refs.refTable.resetLayout()
      })
    }
  }
}
</script>

<style scoped>

</style>
